<template>
    <div class="AppointmentRepair">
      <el-card>
         <div class="radio-box">
           <el-radio-group v-model="radioValue" size="medium ">
             <el-radio-button label="概览"></el-radio-button>
             <el-radio-button label="选择设备"></el-radio-button>
             <el-radio-button label="故障描述"></el-radio-button>
             <el-radio-button label="提交报修"></el-radio-button>
           </el-radio-group>
         </div>
        <div class="container">
          <OverviewPage v-if="radioValue==='概览'"></OverviewPage>
          <ChoiceDevice v-if="radioValue==='选择设备'"></ChoiceDevice>
          <ErrorDescription v-if="radioValue==='故障描述'"></ErrorDescription>
          <SubmitRepair v-if="radioValue==='提交报修'"></SubmitRepair>
        </div>
      </el-card>
    </div>
</template>

<script>
  import ChoiceDevice from './components/ChoiceDevice.vue'
  import ErrorDescription from './components/ErrorDescription.vue'
  import SubmitRepair from './components/SubmitRepair.vue'
  import OverviewPage from './components/OverviewPage.vue'
    export default {
        name:'AppointmentRepair',
        data(){
            return {
              radioValue:'概览',
            }
        },
        methods: {},
        components: {
          ChoiceDevice,
          ErrorDescription,
          SubmitRepair,
          OverviewPage
        },
        computed: {}
    }
</script>

<style lang="scss" scoped>
   .AppointmentRepair{
     margin-bottom: 20px;
     .radio-box{
       text-align: center;
     }
     .container{
       margin-top: 20px;
     }
   }
</style>
